<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--公共css-->
    <div th:replace="common :: common-css"></div>
    <!--公共js-->
    <div th:replace="common :: common-js"></div>
</head>
<body>
<!--顶部导航-->
<div th:replace="common :: top-nav"></div>
<!--顶部导航-->

<!--左侧导航-->
<div th:replace="common :: common-account-left-nav"></div>
<!--左侧导航-->

<!--修改密码表单-->
<div class="col-sm-6 col-sm-offset-1">

    <form id="changePwd_form" class="form-horizontal" method="post">
        <div class="form-group">
            <label for="userName" class="col-sm-2 control-label">账号</label>
            <div class="col-sm-8">
                <input name="userName" readonly="readonly" type="text" class="form-control" id="userName" th:value="${session.loginUserName}">
            </div>
        </div>
        <div class="form-group">
            <label for="oldPwd" class="col-sm-2 control-label">旧密码</label>
            <div class="col-sm-8">
                <input type="password"  class="form-control" id="oldPwd" placeholder="旧密码">
                <span class="text-danger hidden "></span>
            </div>
        </div>
        <div class="form-group">
            <label for="newPwd" class="col-sm-2 control-label">新密码</label>
            <div class="col-sm-8">
                <input type="password"  class="form-control" id="newPwd" placeholder="新密码">
                <span class="text-danger hidden "></span>
            </div>
            <a href="javascript:;" class="col-sm-2" style="padding: 0px;">
                <span class="glyphicon glyphicon-eye-close"></span>
            </a>
        </div>
        <div class="form-group">
            <label for="affirmPwd" class="col-sm-2 control-label">确认新密码</label>
            <div class="col-sm-8">
                <input type="password"  class="form-control" id="affirmPwd" placeholder="确认新密码">
                <span class="text-danger hidden"></span>
            </div>
            <a href="javascript:;" class="col-sm-2" style="padding: 0px;">
                <span class="glyphicon glyphicon-eye-close"></span>
            </a>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="changePwd_submitBtn" type="button" class="btn btn-success">修改</button>
            </div>
        </div>

        <div id="changePwd_warning" class="alert alert-danger alert-dismissible hidden" >
            <button type="button" class="close" data-dismiss="alert" >
                <span>&times;</span>
            </button>
            <strong>警告!</strong> <span class="msg"></span>
        </div>
    </form>
</div>
<!--修改密码表单-->



</body>
<script>
    $(document).ready(function(){
        $("#left_bar_changepwd").addClass("active");
        //获取项目,带斜杠如:/项目名
        projectName = window.document.location.pathname.match(/^[/]{1}\w*/);

        //显示明文密码的2个开关
        $(".form-group").on("click",".glyphicon",function(){
            //父代(<a>)的,前一个同辈(<div>)的,子代(<input>)
            let $pwdInput=$(this).parent().prev().children("input");
            if($pwdInput.attr("type")==="password"){
                $(this).removeClass("glyphicon-eye-close");
                $(this).addClass("glyphicon-eye-open");
                $pwdInput.attr("type","text");
            }else{
                $(this).removeClass("glyphicon-eye-open");
                $(this).addClass("glyphicon-eye-close");
                $pwdInput.attr("type","password");
            }
        });

        //符合规则才能提交修改密码
        $("#changePwd_submitBtn").click(function(){
            let reg=/^[a-zA-Z0-9]+$/;
            let $oldPwd=$("#oldPwd");
            let $newPwd=$("#newPwd");
            let $affirmPwd=$("#affirmPwd");
            $oldPwd.next().addClass("hidden");
            $newPwd.next().addClass("hidden");
            $affirmPwd.next().addClass("hidden");
            $("#changePwd_warning").addClass("hidden");
            if(!reg.test($oldPwd.val())){//旧密码含有非法字符
                $oldPwd.next().removeClass("hidden");
                $oldPwd.next().text("只能输入数字和字母");
            }
            else if(!reg.test($newPwd.val())){//新密码含有非法字符
                $newPwd.next().removeClass("hidden");
                $newPwd.next().text("只能输入数字和字母");
            }
            else if($newPwd.val()!=$affirmPwd.val()){//2次密码不一致
                $affirmPwd.next().removeClass("hidden");
                $affirmPwd.next().text("2次密码不一致");
            }
            else if($newPwd.val()==$oldPwd.val()){//新旧密码不能相同
                $("#changePwd_warning").removeClass("hidden");
                $("#changePwd_warning .msg").text("新密码不能与旧密码相同");
            }
            else{
                let $userName=$("#userName").val();
                $.ajax({
                    url:projectName+"/userController/changePwd",
                    data:{"userName":$userName,"oldPwd":$oldPwd.val(),"newPwd":$newPwd.val(),"affirmPwd":$affirmPwd.val()},
                    type:"POST",
                    success:function (result) {
                        if (result=="success"){//修改成功
                            alert("修改成功,请重新登录");
                           window.location.href=window.location.href;//全局刷新页面

                        } else{//修改失败
                            $("#changePwd_warning").removeClass("hidden");
                            $("#changePwd_warning .msg").text(result);
                        }
                    }
                });
            }

        });

    });

</script>
</html>